<template>
  <div class="banner_styl" @mouseleave="mouseleaveChild">
    <!-- 左侧分类 -->
    <div class="class_content">
      <div
        @mouseover="mouseenterFather(item, index)"
        class="content_item"
        v-for="(item, index) in classList"
        :key="index"
      >
        <div class="item_left">
          <img
            class="img_styl"
            :src="
              item.img && item.img.length ? imagePreviewUrl + item.img[0] : ''
            "
            alt=""
            srcset=""
          />
          <div class="item_name">{{ item.classifyName }}</div>
        </div>
        <Icons font="#icon-lb-jt" class="icon-lb-jt" fontSize="16px"></Icons>
      </div>
      <img
        class="img_styl1"
        src="@/assets/images/banner_leftimg.png"
        alt=""
        srcset=""
      />
    </div>
    <transition name="slide-left">
      <div class="class_info" v-show="chooseClassIndex != -1">
        <div class="info_name">{{ titleContent }}</div>
        <div class="info_item">
          <div
            class="item_title"
            v-for="(item, index) in productList[chooseClassIndex]"
            :key="index"
            @click="toGoodeFun(item)"
          >
            <Lines
              class="line_styl"
              backColor="#E4E4E4"
              marginLeftright="19px"
            ></Lines>
            <div>{{ item.name }}</div>
            <Lines
              class="line_styl"
              backColor="#E4E4E4"
              marginLeftright="19px"
            ></Lines>
          </div>
          <div
            class="item_title1"
            v-if="
              productList[chooseClassIndex] &&
              productList[chooseClassIndex].length == 0
            "
          >
            暂无数据 ~
          </div>
        </div>
      </div>
    </transition>

    <!-- 轮播图 -->
    <div class="banner_content">
      <Carousel
        :autoplay="true"
        :loop="true"
        :autoplay-speed="2000"
        dots="none"
        arrow="never"
      >
        <CarouselItem>
          <img class="img_banner" src="@/assets/images/banner1.png" />
        </CarouselItem>
        <CarouselItem>
          <img class="img_banner" src="@/assets/images/banner2.png" />
        </CarouselItem>
        <!-- <CarouselItem>
          <img class="img_banner" src="@/assets/images/banner3.png" />
        </CarouselItem>
        <CarouselItem>
          <img class="img_banner" src="@/assets/images/banner4.png" />
        </CarouselItem> -->
      </Carousel>
    </div>
    <!-- 右侧个人信息模块 -->
    <div class="main_right">
      <div class="info_styl">
        <img
          v-if="store_userInfo.userName"
          class="avater_styl"
          src="@/assets/images/already_login.png"
          alt
          srcset
        />
        <img
          v-else
          class="avater_styl"
          src="@/assets/images/no_login.png"
          alt
          srcset
        />
        <div class="info_title">
          Hi
          <!-- {{ store_userInfo.userName ? store_userInfo.userName : '' }} -->
          ，欢迎来到振华电商！
        </div>
      </div>
      <div v-if="store_userInfo.userName" class="info_btn">
        <div class="btn_out" @click="loginOutFun()">退出登录</div>
      </div>
      <div class="info_btn" v-else>
        <div class="btn_register" @click="toPageFun('/register')">注册</div>
        <div class="btn_login" @click="toPageFun('/login')">登录</div>
      </div>

      <div class="menu_styl">
        <div
          class="menu_item"
          @click="toPageFun(item.path)"
          v-for="(item, index) in rightMenu"
          :key="index"
        >
          <Icons
            :font="'#' + item.icon"
            class="icons_styl"
            :class="item.icon"
            fontSize="40px"
          ></Icons>
          <div>{{ item.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import QdNoData from "@/components/common/Qd-NoData.vue";
import { mapGetters, mapMutations } from "vuex";
import localData from "../../../localData";

export default {
  name: "Front-Banner",
  // components: { QdNoData },
  data() {
    return {
      imagePreviewUrl: localData.API_URl + "/guns", // 图片预览地址
      classList: [],
      productList: [],
      chooseClassIndex: -1,
      titleContent: "",
      rightMenu: [
        {
          icon: "icon-wd-xx",
          name: "我的信息",
          path: "/personalCenter/user"
        },
        {
          icon: "icon-wd-zj",
          name: "我的资金",
          path: "/personalCenter/price"
        },
        {
          icon: "icon-wd-dd",
          name: "我的合同",
          path: "/personalCenter/contract"
        },
        {
          icon: "icon-ww-dd",
          name: "提货单",
          path: "/personalCenter/billOrder"
        },
        {
          icon: "icon-wd-cl",
          name: "我的车辆",
          path: "noPath"
        },
        {
          icon: "icon-wd-fp",
          name: "我的发票",
          path: "noPath"
        },
        {
          icon: "icon-wd-jp",
          name: "我的竞拍",
          path: "noPath"
        },
        {
          icon: "icon-jy-jl",
          name: "交易记录",
          path: "noPath"
        },
        {
          icon: "icon-zh-gl",
          name: "账户管理",
          path: "/personalCenter/safeSet"
        }
      ]
    };
  },
  computed: {
    ...mapGetters(["store_userInfo"])
  },
  mounted() {
    this.getClassList();
  },
  methods: {
    ...mapMutations([
      "set_token",
      "set_userInfo",
      "set_loginInfo",
      "set_goodsInfo"
    ]),

    // 获取分类列表
    getClassList() {
      this.httpGet(this.API.API_categoryList, {})
        .then((res) => {
          this.classList = res.data;
          this.productList = [];
          this.classList.forEach((val, index) => {
            this.productList[index] = [];
            this.getProductList(val.id, index);
          });
        })
        .catch((err) => {
          console.error("分类接口报错:", err);
        });
    },
    // 产品列表
    getProductList(val, index) {
      let data = {
        // type: "0",
        classify: val,
        companyId: "",
        delStatus: 1
      };
      this.httpGet(this.API.API_productList, data)
        .then((res) => {
          this.productList[index] = res.data;
        })
        .catch((err) => {
          console.error("产品接口报错:", err);
        });
    },
    loginOutFun() {
      this.$Modal.confirm({
        title: "确认",
        content: `确认要退出登录？`,
        loading: true,
        onOk: () => {
          this.$Message.success("退出成功!");
          this.set_token("");
          this.set_userInfo("");
          this.set_goodsInfo([]);
          this.$Modal.remove();
        }
      });
    },
    toGoodeFun(item) {
      this.$router.push({
        path: "/product/product-detail",
        query: {
          id: item.id
        }
      });
    },
    toPageFun(val) {
      if (val == "noPath") {
        this.$Message.error("正在开发中 ~");
        return;
      }
      this.$router.push(val);
    },
    mouseenterFather(item, index) {
      this.titleContent = item.cateName;
      this.chooseClassIndex = index;
    },
    mouseleaveChild() {
      this.chooseClassIndex = -1;
    }
  }
};
</script>
<style lang="less" scoped>
@import "~@/assets/styles/main.less";

.banner_styl {
  .flex-x();
  // height: 500px;
  height: 360px;
  padding: 0 calc(~"(100% - 1185px)/2");
  margin-top: 12px;
  box-sizing: border-box;
  min-width: 1185px;
  background-color: #f6f6f6;

  .class_info {
    width: 717px;
    height: 360px;
    padding: 20px 0;
    margin-left: 200px;
    position: absolute;
    z-index: 1000;
    background-color: #ffffff;
    box-shadow: 0 2px 19px 0 rgba(0, 0, 0, 0.1);

    .info_name {
      padding: 0 32px;
      margin-bottom: 10px;
      text-align: left;
      color: @themeColor;
      font-size: 16px;
      font-weight: bold;
    }

    .info_item {
      .flex-x(flex-start);
      flex-wrap: wrap;
      margin-top: 20px;

      .item_title {
        .flex-x();
        margin: 0 25px 4px 0;
        cursor: pointer;
      }

      .item_title1 {
        padding-top: 100px;
        margin: 0 auto;
        font-size: 16px;
        color: #999999;
      }

      .item_title:hover {
        color: @themeColor;
      }
    }
  }

  .class_content {
    position: relative;
    width: 211px;
    height: 100%;
    padding: 26px 0 20px 0;
    overflow: hidden;
    overflow-y: auto;
    background-color: #ffffff;

    .content_item {
      .flex-x();
      cursor: pointer;
      margin: 0 16px 28px 19px;

      .item_left {
        .flex-x(flex-start);

        .item_name {
          font-size: 14px;
          margin-left: 8px;
        }

        .img_styl {
          width: 18px;
          height: 18px;
        }
      }

      .class_title {
        .flex-x(flex-start);
        padding: 6px 0 0 20px;
        .one-ellipsis();

        .title_styl {
          margin: 0 10px 14px 0;
          font-size: 12px;
          color: #a7a7a7;
        }
      }
    }

    .img_styl1 {
      width: 211px;
      height: 130px;
      display: block;
      position: absolute;
      bottom: 8px;
    }

    .citem_styl_copy {
      color: #ffffff;
      background-color: @themeColor;
    }
  }

  .banner_content {
    width: 710px;
    height: 100%;
    position: relative;
    z-index: 100;

    .img_banner {
      width: 710px;
      height: 360px;
      z-index: 99;
    }
  }

  .main_right {
    width: 250px;
    height: 100%;
    padding: 20px;
    background-color: #ffffff;

    .info_styl {
      display: flex;
      align-items: center;

      .avater_styl {
        width: 39px;
        height: 39px;
        margin-right: 8px;
        border-radius: 50%;
      }

      .info_title {
        color: #333333;
      }
    }

    .info_btn {
      .flex-x(center);
      margin-top: 10px;
      padding-bottom: 10px;
      font-size: 12px;
      border-bottom: 1px solid #e6e6e6;

      .btn_register {
        .solid-btn(90px, 22px, 2px, #e72a19, #ffffff);
        margin-right: 10px;
      }

      .btn_login {
        .solid-btn(90px, 22px, 2px, #00164b, #ffe07b);
      }

      .btn_out {
        .solid-btn(90px, 22px, 2px, #496889, #ffffff);
      }
    }

    .menu_styl {
      .flex-x();
      margin-top: 5px;
      flex-wrap: wrap;
      font-size: 12px;

      .menu_item {
        .flex-y(center);
        width: 56px;
        color: #333333;
        margin-bottom: 5px;
        cursor: pointer;

        .icons_styl {
          //   width: 40px;
          height: 60px;
        }
      }
    }
  }
}
</style>
